<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            /*            cursor: none;*/
        }
        
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        #box {
            width: 385px;
            margin: 0 auto;
            overflow: hidden;
            padding-top: 400px;
        }
        
        #box li {
            float: left;
            background: black;
            border: 2px solid black;
            width: 45px;
            height: 45px;
            margin: 0 5px;
            color: #fff;
            text-align: center;
            box-sizing: border-box;
            line-height: 41px;
            position: relative;
        }
        
        #box li.active {
            background: #ccc;
        }
        
        #box li.active:after {
            height: 400px;
        }
        
        #box li:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 0;
            background: pink;
            bottom: 43px;
            left: 0;
            transition: all 0.2s linear;
        }

    </style>
</head>

<body>
    <audio src="" id="sy"></audio>
    <ul id="box">
        <li>A</li>
        <li>S</li>
        <li>D</li>
        <li>F</li>
        <li>J</li>
        <li>K</li>
        <li>L</li>
    </ul>
    <script>
        var acode = [65, 83, 68, 70, 74, 75, 76];
        var elis = document.getElementById('box').children;
        var sy = document.getElementById("sy");
        document.onkeydown = function(e) {
            e = e || window.event;
            for (var i = 0; i < acode.length; i++) {
                var keycode = e.keyCode || e.charCode;
                if (acode[i] === keycode) {
                    elis[i].className = "active";
                    sy.src = "audio/'+(i+1)+'.mp3";
                }
            }
        }
        document.onkeyup = function(e) {
            e = e || window.event;
            for (var i = 0; i < acode.length; i++) {
                var keycode = e.keyCode || e.charCode;
                if (acode[i] === keycode) {
                    elis[i].className = "";
                }
            }
        }

    </script>
</body>
<html>
